<template>
  <px-table :data="tableData" class="equip-table" height="calc(100vh - 250px)" border>
    <px-table-column
      v-for="(item, index) in tableColumns"
      :key="index"
      :label="item.label"
      :min-width="item.minWidth"
      :align="item.align"
      :show-overflow-tooltip="item.showOverflowTooltip"
      :fixed="item.fixed"
    >
      <template #default="scope">{{
        scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
      }}</template>
    </px-table-column>
    <px-table-column fixed="right" label="操作" min-width="100">
      <template #default="scope">
        <px-tooltip content="移除" placement="top">
          <px-button v-has="'ALL_ALERT_REMOVE'" link type="primary" icon="Logout" @click="handleRestore(scope.row)" />
        </px-tooltip>
      </template>
    </px-table-column>
  </px-table>
  <pagination
    v-show="total > 0"
    v-model:page="queryParams.pageNum"
    v-model:limit="queryParams.pageSize"
    class="equip-table-pagination"
    :total="total"
    @pagination="queryTable"
  />
</template>

<script setup lang="ts">
import { queryShieldRuleByPerson, removeShieldRuleByPerson } from "@/api/alert";
import { PxMessage, PxMessageBox } from "px-ui";
import { onMounted, reactive, toRefs } from "vue";

const data = reactive<Record<string, any>>({
  queryParams: {
    pageNum: 1,
    pageSize: 10
  },
  tableData: [],
  total: 0,
  tableColumns: [
    { prop: "point", label: "报警点位", minWidth: "400", showOverflowTooltip: true },
    { prop: "pointPosition", label: "位置", minWidth: "200", showOverflowTooltip: true },
    { prop: "shieldTime", label: "屏蔽时间", minWidth: "180", showOverflowTooltip: true }
  ]
});

const { queryParams, tableData, total, tableColumns } = toRefs(data);

// 进入页面时触发
onMounted(() => queryTable());

const queryTable = async () => {
  const userInfo = JSON.parse(localStorage.getItem("userInfo"));
  const data = await queryShieldRuleByPerson({ ...queryParams.value, accountName: userInfo.username });
  tableData.value = data?.data;
  total.value = data?.total;
};

const handleRestore = async row => {
  try {
    const { id, point } = row;
    PxMessageBox.confirm(`是否确认移除报警点位名称为${point}的数据项？`, "温馨提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
      draggable: true
    }).then(async () => {
      await removeShieldRuleByPerson({ id });
      PxMessage({
        message: "移除成功",
        type: "success"
      });
      queryTable();
    });
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped>
@import url("@/views/all/equip/scss/table-list.scss");
</style>
